<template>
	<div class="container">
		<div class="searchBox">
			<div class="s_inp">
				<u-cell-group>
					<u-cell icon="coupon" :title="selectXl" @click="p_xl = true" :isLink="true" arrow-direction="right">
					</u-cell>
				</u-cell-group>
				<u-picker :show="p_xl" :columns="[xlList]" @confirm="changeSearchXl" @cancel="closePicker"
					@close="closePicker" :closeOnClickOverlay="true"></u-picker>
			</div>
			<div class="s_inp">
				<u--input placeholder="请输入专业名称" border="surround" v-model="searchZymc" @change="changeZymc"></u--input>
			</div>
			<div class="s_btn">
				<u-button type="primary" @click="search();" color="#FF805A">
					立即查询
				</u-button>
			</div>
		</div>

		<div class="resultBox" v-if="showResult">
			<div class="container" v-if="resultList.length > 0">
				<h4>为您扫描到<i>{{ resultList.length }}</i>个专业</h4>
				<div class="items">
					<div class="item" v-for="(item,index) in resultList" :key="index">
						<h3>{{ item.xueli }}</h3>
						<p><span>专业大类</span> {{ item.zydl }}</p>
						<p><span>专业类</span> <i>{{ item.zyl }}</i></p>
						<p><span>专业名称</span> {{ item.zymc }}</p>
						<p><span>专业代码</span> {{ item.zydm }}</p>
					</div>
				</div>
			</div>
			<div class="container" v-else>
				<h4><i>未检索到专业信息<br>请修改条件或专业名称后重新检索</i></h4>
			</div>
		</div>

		<div class="addFriend">
			<div class="container">
				<image :src="userInfo.ewm" show-menu-by-longpress="true" mode="widthFix"></image>
			</div>
		</div>

		<div class="zyBox">
			<h2 class="textTlt">专业分类列表展示</h2>
			<ul class="xueli_list">
				<li v-for="(xl, i) in xlList" :key="i" :class="xlIndex == i ? 'active' : ''" @click="changeXl(xl, i)">
					{{ xl }}</li>
			</ul>
			<div class="zy_list">
				<div class="zy_list_con">
					<div class="zy_tlt">专业门类</div>
					<ul>
						<li v-for="(zydl, i) in zydlList" :key="i" :class="zydlIndex == i ? 'active' : ''"
							@click="changeZydl(zydl, i)">{{ zydl }}</li>
					</ul>
				</div>
				<div class="zy_list_con">
					<div class="zy_tlt">专业类</div>
					<ul>
						<li v-for="(zyl, i) in zylList" :key="i" :class="zylIndex == i ? 'active' : ''"
							@click="changeZyl(zyl, i)">{{ zyl }}</li>
					</ul>
				</div>
				<div class="zy_list_table">
					<table>
						<tr>
							<th>专业名称</th>
							<th>专业代码</th>
						</tr>
						<tr v-for="(item, i) in zylGwList" :key="i">
							<td>{{ item.zymc }}</td>
							<td>{{ item.zydm }}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>


		<u-modal :show="showLogin" title="请登录" :cancelText="'暂不登录'" :showCancelButton="false"
			:showConfirmButton="false">
			<view class="slot-confirmButton">
				<p>3次体验已用完,出于服务器压力,请授权登录</p>
				<div class="modalBtns">
					<u-button :customStyle="style3" slot="cancel" @click="closePicker" type="info" shape="circle">暂不登录
					</u-button>
					<u-button :customStyle="style3" slot="confirm-button" type="success" shape="circle"
						@click="toLogin()">登录</u-button>
				</div>

			</view>

		</u-modal>
		<div class="name">{{name}}</div>
		<share></share>
		<u-toast ref="uToast"></u-toast>

	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	import share from '../../common/share/index.vue';
	export default {
		data() {
			return {
				name: "",
				searchNum: 0,
				userInfo: {
					ewm: ""
				},
				zyList: [],

				xlList: [],
				xlGwList: [],
				xlIndex: 0,

				zydlList: [],
				zydlGwList: [],
				zydlIndex: 0,

				zylList: [],
				zylGwList: [],
				zylIndex: 0,

				selectXl2: '',
				selectZydl: '',
				selectZyl: '',

				p_xl: false,
				selectXl: "选择学历",
				xueliList: [],
				searchZymc: '',
				resultList: [],
				showResult: false,

				scrollTop: 0,
				style3: {
					width: "45%"
				},
				showLogin: false
			};
		},
		onShareAppMessage(options) {
			let shareObj = {
			    title: "省考-专业分类",
			    path: '/pages/sk-tools/zyfl/index?name=' + this.name,
			    imageUrl: ''   
			};
			return shareObj
		},
		onShareTimeline(res) {
			let that = this;
			return {
				title: '省考-专业分类',
				query: "name=" + that.name
			};
		},
		onShow() {},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			let that = this;
			that.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			if (!options) {} else {
				this.name = options.name
			}
		},
		computed: {
			searchtimes() {
				return this.$store.getters.searchtimes ? this.$store.getters.searchtimes : '';
			},
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			useropenid() {
				return this.$store.getters.useropenid ? this.$store.getters.useropenid : '';
			},
			username() {
				return this.$store.getters.username ? this.$store.getters.username : '';
			},
			loginpage() {
				return this.$store.getters.loginpage ? this.$store.getters.loginpage : '';
			}
		},
		mounted() {
			if (this.searchtimes > 0) {
				this.searchNum = this.searchtimes
			}
			this.name = this.name ? this.name : this.username;
			this.LogSetName(this.name);
			this.getUserInfo()
		},
		watch: {
			userphone(val) {
				if (this.userphone) {
					if (!this.loginpage.includes('sk-zyfl')) {
						this.singleRegister()
					}

				}
			}
		},
		created() {
			let that = this;

			that.getAllZyInfo();
		},
		methods: {
			...mapActions(['LogSetSearchtimes', 'LogSetPhone', 'LogSetOpenid', 'LogSetName', 'LogSetPage']),
			async getUserInfo() {
				const udInfo = await this.$getUser.getInfo(this.name)
				if (this.userphone) {
					if (!this.loginpage.includes('sk-zyfl')) {
						this.singleRegister()
					}
				}
				this.getEwm()
			},
			singleRegister() {
				let that = this
				wx.cloud.callFunction({
					name: 'singleRegister',
					data: {
						fucname: 'hd_zyfl',
						phone: that.userphone,
						user: that.name,
						remark: '省考专业分类查询'
					},
					complete: res => {
						let zlStr = that.loginpage + ',sk-zyfl'
						that.LogSetPage(zlStr);
						console.log('callFunction test result: ', res)
					}
				})
			},
			toLogin() {
				let path = '../../my/login?navTlt=' + '省考专业分类查询'
				this.closePicker()
				uni.navigateTo({
					url: path
				});
			},
			getEwm() {
				let that = this
				uni.request({
					url: 'https://hlj.offcn.com/zg/lynn/userList.js',
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						let i = resjson.filter(item => item.name == that.name)
						that.userInfo.ewm = i[0].ewm2
					}
				});
			},
			closePicker() {
				this.p_xl = false
				this.showLogin = false
			},
			changeSearchXl(e) {
				this.selectXl = e.value[0]
				this.p_xl = false
			},
			checkJumpInfo() {
				let that = this;
			},
			changeZymc(e) {
				let that = this
				that.searchZymc = e
			},
			getAllZyInfo() {
				let that = this;
				uni.request({
					url: 'https://hlj.offcn.com/zg/lynn/sk-tools/zyList.js?' + new Date(),
					method: 'get',
					dataType: 'text',
					data: {},
					success: function(res) {
						// var resjson = JSON.parse(res.data.substr(1, res.data.length - 2));
						that.zyList = JSON.parse(res.data);
						that.filterXl();
					}
				});
			},
			filterXl() {
				let that = this;
				let xlInfo = that.zyList.map(item => item.xueli);

				xlInfo = [...new Set(xlInfo)];
				that.xlList = xlInfo;
				that.selectXl2 = xlInfo[that.xlIndex];
				that.xlGwList = that.zyList.filter(item => item.xueli == that.selectXl2);
				that.filterZydl();
			},
			filterZydl() {
				let that = this;
				let zydlInfo = that.xlGwList.map(item => item.zydl);

				zydlInfo = [...new Set(zydlInfo)];
				that.zydlList = zydlInfo;
				that.selectZydl = zydlInfo[that.zydlIndex];
				that.zydlGwList = that.xlGwList.filter(item => item.zydl == that.selectZydl);
				that.filterZyl();
			},
			filterZyl() {
				let that = this;
				let zylInfo = that.zydlGwList.map(item => item.zyl);

				zylInfo = [...new Set(zylInfo)];
				that.zylList = zylInfo;
				that.selectZyl = zylInfo[that.zylIndex];
				that.zylGwList = that.xlGwList.filter(item => item.zyl == that.selectZyl);
			},
			changeXl(item, i) {
				let that = this;
				that.xlIndex = i;
				that.zydlIndex = 0;
				that.zylIndex = 0;
				that.filterXl();
			},
			changeZydl(item, i) {
				let that = this;
				that.zydlIndex = i;
				that.zylIndex = 0;
				that.filterZydl();
			},
			changeZyl(item, i) {
				let that = this;
				that.zylIndex = i;
				that.filterZyl();
			},
			search() {
				let that = this

				if (that.searchNum >= 3 && !that.userphone) {
					that.showLogin = true
					return
				}

				if (that.selectXl == "选择学历") {
					that.showToast('error', "请选择学历")
					return
				}
				if (!that.searchZymc) {
					that.showToast('error', "请输入专业")
					return
				}
				let arr = that.zyList.filter(item => item.xueli == that.selectXl)
				let zys = arr.filter(item => item.zymc.indexOf(that.searchZymc) != -1)
				that.showResult = true
				that.resultList = zys

				if (!that.userphone) {
					that.searchNum += 1
					that.LogSetSearchtimes(that.searchNum);
				}
			},
			showToast(type, info) {
				this.$refs.uToast.show({
					type: type,
					icon: false,
					title: '失败主题',
					message: info,
				})
			},
			onClose() {
				this.year.showYear = false;
				this.city.showCity = false;
				this.xl.showXl = false;
				this.isyj.showisyj = false;
				this.gzjl.showGzjl = false;
				this.zzmm.showZzmm = false;
				this.activeIndex = -1;
			}
		},
		components: {share}
	};
</script>

<style>
	@import url(./index.css);
</style>
